
@mixin spinLoader ( $circle-size, $scale ) {

    .circle {
        
        position: absolute;
        left: 50%; top: 50%; 
        margin-top: -$circle-size / 2;
        margin-left: -$circle-size / 2;
        width: $circle-size; 
        height: $circle-size;
        border-radius: $circle-size;
        
        background: darken($dark-off-white, 10%);
        box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 1px white;

        position: absolute;
        z-index: 1;

        @include scale($scale);

        &.gif {

            background-image: url(../img/spinner.gif);
            background-position: center center;
            background-repeat: no-repeat;
            
            margin-top: -$circle-size / 3;
            margin-left: -$circle-size / 3;
            width: $circle-size / 1.5; 
            height: $circle-size / 1.5;
            border-radius: $circle-size / 1.5;

            // reset any possible scaling to 1:1
            @include scale(1); 
        }
    }

    .spinner {
        width: $circle-size * 0.7; 
        height: $circle-size * 0.7;
        border-radius: $circle-size * 0.7;

        margin-top: -($circle-size * 0.7) / 2;
        margin-left: -($circle-size * 0.7) / 2;
        position: absolute;
        left: 50%; top: 50%; 

        background: -moz-linear-gradient(left, $grey, $grey 50%, darken($dark-off-white, 9%) 50%, darken($dark-off-white, 9%));
        background: -webkit-gradient(linear, left top, right top, from($grey), to(darken($dark-off-white, 9%)), color-stop(0.5, $grey), color-stop(0.5, darken($dark-off-white, 9%)));

        @include animation ( 0s, 0.6s, spinAroundZ, forwards, linear )
    }

    .innr-circle {
        width: $circle-size * 0.56; 
        height: $circle-size * 0.56;

        border-radius: 100%;
        background: darken($dark-off-white, 9%);
        position: absolute;
        top: 50%; left: 50%;

        margin-top: -($circle-size * 0.56) / 2;
        margin-left: -($circle-size * 0.56) / 2;
    }	
	 
}


